<template>
  <!-- 星座模板 -->
	<view class="eval-game-cover">
		<image :src="data.indexImgUrl" class="eval-bg" mode="widthFix"></image>
		<view class="input" @click="showPopup">
      <input type="text" :value="value" disabled="disabled" placeholder="请选择你的星座" placeholder-style="color: rgba(255,255,255,.7);" />
    </view>
		<view @click="skip" class="eval-skip">
			<image :src="data.BgImgUrl" class="eval-btn"></image>
		</view>

    <uni-popup ref="popup" type="center" :maskClick="false">
			<view class="advert-pop">
				<view class="content">
          <view class="box_main">
						<view class="box" v-for="(item, index) in xinzuoList" :key="index" :data-name="item.name" :data-id="item.id" @click="clickXinzuo">
              <image :src="item.img"></image>
            </view>
          </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: ['typeId', 'gameId', 'data'],
		data() {
			return {
				xzId: "",
				value: "",
        xinzuoList: [
          {
            img: 'http://fcdn.qiushilaile.com/game/default-70301634730217525.png',
            name: '白羊座',
            id: 1,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-22671634730238476.png',
            name: '金牛座',
            id: 2,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-19241634730503756.png',
            name: '双子座',
            id: 3,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-631634730524928.png',
            name: '巨蟹座',
            id: 4,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-12931634730574743.png',
            name: '狮子座',
            id: 5,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-66111634730591664.png',
            name: '处女座',
            id: 6,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-17771634730606592.png',
            name: '天秤座',
            id: 7,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-18671634730661657.png',
            name: '天蝎座',
            id: 8,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-81361634730674322.png',
            name: '射手座',
            id: 9,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-25431634730699699.png',
            name: '摩羯座',
            id: 10,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-73981634730712588.png',
            name: '水瓶座',
            id: 11,
          },
          {
            img: 'http://fcdn.qiushilaile.com/game/default-6411634730730257.png',
            name: '双鱼座',
            id: 12,
          },
        ],
			}
		},
		methods: {
			skip() {
        console.log(this.value);
        if(this.value == '') {
          tt.showToast({
            title: "请选择你的星座",
            duration: 2000,
          });
        } else {
          this.$emit('next', this.gameId, this.xzId)
        }
			},
			showPopup(e) {
        this.$refs.popup.open('center')
			},
      hidePopup() {
        this.$refs.popup.close()
      },
      clickXinzuo(e) {
        console.log(e.currentTarget.dataset);
        this.value = e.currentTarget.dataset.name;
        this.xzId = e.currentTarget.dataset.id;
        this.hidePopup();
      },
		}
	}
</script>

<style lang="scss" scoped>
  
	@keyframes dynamic {
		0% {
			transform: scale(0.85)
		}

		50% {
			transform: scale(1)
		}

		100% {
			transform: scale(0.85)
		}
	}

	.eval-game-cover {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.eval {
		&-bg {
			width: 100vw;
			height: 100vh;
		}

		&-skip {
			width: 400rpx;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 118rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn-default {
				width: 280rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #48CFE5;
				color: #FFFFFF;
				font-size: 36rpx;
				border-radius: 45rpx;
				animation: 1s dynamic infinite;
			}
		}

		&-btn {
			width: 447rpx;
			height: 105rpx;
			position: absolute;
			// left: 50%;
			// top: 50%;
			transform: translate(-50%, -50%);
			animation: 1s dynamic infinite;
		}
	}

	.input {
		position: absolute;
		top: 78%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 446rpx;
		height: 100rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-50791634730102380.png) no-repeat;
		background-size: 100% 100%;
	}

	.input input {
		width: 50%;
		margin: 40rpx auto 0;
		color: rgba(255, 255, 255, .7);
		text-align: center;
	}
  .advert-pop {
		width: 100vw;
		height: 217vw;
		background: url(http://fcdn.qiushilaile.com/game/default-17051634730193673.jpg) no-repeat;
    background-size: 100% 100%;

		.content {
      // background: url(http://fcdn.qiushilaile.com/game/default-40281631266491192.png) no-repeat;
      // background-size: 100% 100%;
			height: 1144rpx;
      width: 646rpx;
			margin: 0rpx 50rpx 0;
			position: relative;
			transform: translateY(246rpx);
      
      .box_main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: absolute;
        top: 14.5%;
        left: 11%;

        .box {
          width: 128rpx;
          height: 190rpx;
          margin: 20rpx;
        }
        .box image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
		}

		.advert-img {
			width: 100%;
			height: 100%;
		}

		.btn {
			width: 100%;
			height: 120rpx;
			position: absolute;
			bottom: -25px;
			border-radius: 20rpx;

			.camera {
				height: 80rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				padding: 0 40rpx;
				margin: 25rpx 60rpx 15rpx 60rpx;
				color: #FFFFFF;
				border-radius: 54rpx;

				.icon {
					width: 46rpx;
					height: 40rpx;
					margin-right: 30rpx;
				}
			}
		}

		.close {
			width: 50rpx;
			height: 50rpx;
			margin: 70rpx auto 0 auto;
		}
	}
</style>
